import { Alert, Collapse } from 'antd';
import { useTranslation } from 'react-i18next';

import ButtonControl from './level/ButtonControl';
import DOS from './level/DOS';
import InputValidation from './level/InputValidation';
import LikeControl from './level/LikeControl';

const { Panel } = Collapse;

interface PanelProps {
  header: any;
  element: string | JSX.Element;
}

const Scene = () => {
  const { t } = useTranslation();
  const scenes: PanelProps[] = [
    {
      header: t('inputValidation'),
      element: <InputValidation />,
    },
    {
      header: t('buttonControl'),
      element: <ButtonControl />,
    },
    {
      header: t('dos'),
      element: <DOS />,
    },
    {
      header: t('likeControl'),
      element: <LikeControl />,
    },
  ];

  return (
    <section className="p-4">
      <Alert className="mb-4" showIcon type="info" message={t('sceneIntroduce')} />
      <Collapse defaultActiveKey={[1, 2, 3, 4]}>
        {scenes.map((s, idx) => (
          <Panel header={s.header} key={idx + 1}>
            {s.element}
          </Panel>
        ))}
      </Collapse>
    </section>
  );
};

export default Scene;
